<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天式笔记本</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="chat-container">
        <!-- 头部 -->
        <div class="chat-header">
            <div class="header-title">
                <h3>📝 我的笔记</h3>
                <span class="note-count">0 条笔记</span>
            </div>
            <button class="clear-btn" id="clearBtn" title="清空所有笔记">🗑️</button>
        </div>

        <!-- 聊天消息区域 -->
        <div class="messages-container" id="messagesContainer">
            <div class="welcome-message">
                <div class="system-message">
                    <span>🎉 欢迎使用聊天式笔记本！</span>
                    <p>你可以像聊天一样记录你的想法和笔记</p>
                </div>
            </div>
        </div>

        <!-- 输入区域 -->
        <div class="input-container">
            <div class="input-wrapper">
                <textarea id="noteInput" placeholder="输入你的笔记..." rows="1" maxlength="1000"></textarea>
                <div class="input-actions">
                    <button id="addPageBtn" class="page-btn" title="添加当前网页信息">🌐</button>
                    <button id="screenshotBtn" class="page-btn" title="截取当前网页">📸</button>
                    <span class="char-count" id="charCount">0/1000</span>
                    <button id="sendBtn" class="send-btn" title="发送笔记">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                            <path d="M2 21L23 12L2 3V10L17 12L2 14V21Z" fill="currentColor"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 右键菜单 -->
    <div class="context-menu" id="contextMenu">
        <div class="menu-item" id="editNote">✏️ 编辑</div>
        <div class="menu-item" id="deleteNote">🗑️ 删除</div>
        <div class="menu-item" id="copyNote">📋 复制</div>
    </div>

    <script src="sidepanel.js"></script>
</body>

</html>